<template>
  <div class="desktop">
    <div v-swiper:mySwiper="swiperOptions" class=" swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" :key="item" v-for="item in bannerArr">
          <img :src="item" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <video-play :gate="gate"></video-play>
  </div>
</template>

<script>
import VideoPlay from './components/VideoPlay'
import 'swiper/css/swiper.css'

// 防抖
// const debounce = function (fn, interval = 50) {
//   let timer = null
//   return function (...arg) {
//     clearTimeout(timer)
//     timer = setTimeout(() => {
//       fn.apply(this, arg)
//     }, interval)
//   }
// }

export default {
  name: 'Desktop',
  components: {
    VideoPlay
  },
  data () {
    return {
      checked: true,
      isDown: false,
      defaultWidth: 1920,
      defaultHeight: 1080,
      gate: [
        {
          name: '预算',
          port: 9775,
          id: '01'
        },
        {
          name: '国资',
          port: 9776,
          id: '02'
        },
        {
          name: '经济运行',
          port: 9778,
          id: '04'
        },
        {
          name: '重大项目',
          port: 9777,
          id: '05'
        },
        {
          name: '审计',
          port: 9779,
          id: '03'
        }
      ],
      flag: false,
      swiper: null,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        autoHeight: true,
        observer: false, // 修改swiper自己或子元素时，自动初始化swiper
        allowTouchMove: false,
        // 自动播放
        autoplay: {
          delay: 5000,
          disableOnInteraction: true
        },
        loop: true,
        // 滑动速度
        speed: 1000
      },
      bannerArr: [require('../asset/img/14.jpg'), require('../asset/img/19.jpg'), require('../asset/img/2.jpg'), require('../asset/img/8.jpg')]
    }
  },
  mounted () {
    console.log(this.mySwiper)
    // this.mySwiper.slideTo(3, 1000, false)
    // this.fitScreen()
    // const resizeWH = debounce(() => {
    //   this.fitScreen()
    // })
    // window.addEventListener('resize', resizeWH)
    // this.$once('hook:beforeDestroy', () => {
    //   window.removeEventListener('resize', resizeWH)
    // })
  },
  computed: {
    // mySwiper () {
    //   console.log(this.$refs)
    //   return this.$refs.mySwiper.$swiper
    // }
  },
  methods: {
    fitScreen () {
      const pcWidth = document.documentElement.clientWidth || document.body.clientWidth
      const pcHeight = document.documentElement.clientHeight || document.body.clientHeight
      const whFlag = pcWidth / this.defaultWidth > pcHeight / this.defaultHeight
      const scale = (whFlag ? pcHeight / this.defaultHeight : pcWidth / this.defaultWidth)
      if (this.$el) {
        this.$el.style.width = `${this.defaultWidth}PX`
        this.$el.style.height = `${this.defaultHeight}PX`
        this.$el.style.transform = `scale(${scale})`
        this.$el.style.top = `${whFlag ? -(this.defaultHeight * (1 - scale)) / 2 : -((this.defaultHeight * (1 - scale)) / 2 - (pcHeight - this.defaultHeight * scale) / 2)}PX`
        this.$el.style.left = `${whFlag ? -((this.defaultWidth * (1 - scale)) / 2 - (pcWidth - this.defaultWidth * scale) / 2) : -(this.defaultWidth * (1 - scale)) / 2}PX`
      }
    },
    mouseEnter () {
      this.flag = true
      this.swiper.autoplay.stop()
    },
    mouseLeave () {
      this.flag = false
      this.isOpen()
    },
    isOpen () {
      if (this.checked) {
        this.swiper.autoplay.start()
      } else {
        this.swiper.autoplay.stop()
      }
    },
    handleSwitch (index) {
      this.swiper.slideTo(index)
    },
    onChange (checked) {
      this.checked = checked
      this.isOpen()
    },
    onSwiper () {

    },
    onSlideChange () {

    }
  }
}
</script>

<style lang="scss" scoped>
.desktop {
  position: relative;
  width: 1920PX;
  height: 1080PX;
  overflow: hidden;
  .mask {
    position: absolute;
    width: 1058PX;
    height: 90PX;
    left: 431PX;
    z-index: 9;
    .switch-buttons {
      width: 100%;
      height: 100%;
      padding: 0 50PX;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #070F1D;
      opacity: 0.9;
      border-radius: 0 0 39PX 39PX;
      border: 1px solid #3196FA;
      >button {
        width: 134PX;
        height: 61PX;
        font-size: 20PX;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 61PX;
        background: url('./img/bg-button.png');
        border: none;
        opacity: .75;
        cursor: pointer;
      }
      .autoPlay{
        display: inline-block;
        height: 61PX;
        box-sizing: border-box;
        padding-top: 4PX;
        text-align: center;
        color: white;
        .ant-switch{
          background-color: rgba(158, 160, 161, 1);
        }
        .ant-switch-checked{
          background-color: #1890ff;
        }
        .ant-switch{
          min-width: 44PX;
          height: 23PX;
        }
        .ant-switch-loading-icon, .ant-switch::after{
          width: 19PX;
          height: 19PX;
        }
        p{
          margin-top: 7PX;
          text-align: center;
        }
      }
      .active {
        opacity: 1;
      }
    }
    .fade-enter,.fade-leave-to{
      transform: translateY(-90PX);
    }
    .fade-enter-active,.fade-leave-active{
      transition: all 0.3S;
    }
  }
  .iframe{
    height: 200PX;
  }
  .swiper-container {
    height: 3rem;
    width: 5rem;
    overflow: hidden;
    .swiper-slide {
      height: 3rem;
      width: 5rem;
      display: inline-block;
      img{
        width: 100%;
        height: 100%;
      }
      // .preview {
      //   width: 100%;
      //   height: 100%;
      //   border: none;
      // }
    }
  }
}
</style>
